<template>
  <div class="login-container">
    <div class="login">
      <div class="left">
        <div class="top">
          <img src="@/assets/images/loginLeft.png">
        </div>
        <div class="bottom">
          <el-form ref="stuForm" :model="formData" :rules="rules" size="medium" label-width="100px" class="form">
            <el-form-item label-width="0" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入账号"
                clearable
                prefix-icon="el-icon-mobile"
                :style="{width: '250px'}"
              />
            </el-form-item>
            <el-form-item label-width="0" prop="password">
              <el-input
                v-model="formData.password"
                type="password"
                placeholder="请输入密码"
                clearable
                prefix-icon="el-icon-lock"
                suffix-icon="el-icon-view"
                :style="{width: '250px'}"
              />
            </el-form-item>
            <el-form-item label-width="0" prop="field105" class="pass">
              <el-checkbox>
                记住密码
              </el-checkbox>
            </el-form-item>
            <el-form-item label-width="0" prop="loginBtn">
              <el-button type="warning" size="medium" :style="{width:'200px'}" @click="loginBtn">立即登录</el-button>
            </el-form-item>
          </el-form></div>
      </div>
      <div class="right"><img src="@/assets/images/loginRight.png"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: 'admin',
        password: 111111
      },
      rules: {
        name: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // 确定登录按钮点击事件
    async loginBtn() {
      // 验证表单
      await this.$refs.stuForm.validate()
      // 发送登录请求 此项目没有登录接口，所以不需要
      // 跳转页面
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep  .el-card__body {
    padding: 0;
    width: 100%;
    height: 100%;
  }
.login-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login{
  width: 1000px;
  height: 500px;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: -2px 2px 10px 10px #cccccc;
  display: flex;
  overflow: hidden;
  .left{
    color: red;
    width: 450px;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .top{
      width: 100%;
      height: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        display: block;
        width: 250px;
        height: 100px;
      }
    }
    .bottom{
      width: 100%;
      height: 70%;
      // background-color: yellowgreen;

      .form{
        margin-top: 50px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // justify-content: space-evenly;
      }
      .pass{
        width: 100%;
        padding-left: 100px;
      }
    }
  }
  .right{
    width: 550px;
    height: 100%;
    background-color: #fff;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
